Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Мастхэв для каждого интернет-магазина. Развлеките своих пользователей, чтобы они не скучали! Чем интереснее сайт, тем больше шансов, что покупатель остановит свой выбор на нем. Добавление товаров в корзину простым перетаскиванием товара в "корзину-мишень". "Мишень" появляется при начале перетаскивания.

В комплекте целых 7 видов "панели-мишени":
• корзина в светящемся жёлтом круге;
• полупрозрачная панель внизу сайта с надписью "Поместите товар сюда!";
• полупрозрачная панель вверху сайта с надписью "Поместите товар сюда!";
• выдвигающаяся слева стильная панель;
• выдвигающаяся справа стильная панель;
• анимированный и стильный блок с надписью "Поместите товар сюда!";
• стильный блок в центре экрана с надписью "Поместите товар сюда!".

Надпись можно изменять по своему усмотрению.

Первый шаг: загрузка файлов

Перейдите в Панель управления » Файловый менеджер. В правом верхнем углу кликните на кнопку "Создать папку", введите название папки dragNdrop. Кликните на галочку и ура, мы создали папку с нужным именем!:) Загрузите в неё все файлы из папки "стили", поставляемой в архиве данного скрипта.

Второй шаг: установка кода

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Каталог товаров" перед </body></html> разместите код:

<script type="text/javascript" src="/.s/src/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$(".goods-list .list-item").draggable({
 zIndex: '999',
 opacity: 0.85,
 cursor: 'move',
 scroll: false,
 helper: 'clone',
 tolerance: 'pointer',
 revert: false,
});
$("#dnd-basket").droppable({
 activeClass: 'active',
 tolerance: 'pointer',
 drop: function(event, ui) {
 add2Basket(ui.draggable.attr('id').split('-')[2], ui.draggable.children().attr('data-pref'));
 }
});
</script>

после чего сохраните изменения.

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Вид товара в каталоге". В самом начале вставьте код:

<div id="itm-$ID$" data-pref="$BLOCK_PREF$">

в самом конце вставьте код:

</div>

после чего сохраните изменения.

Третий шаг: установка стилей

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Каталог товаров" перед </head> разместите код:

<link rel="stylesheet" href="/.s/src/jquery-ui/themes/smoothness/smoothness.min.css">

Четвёртый шаг: настройка и использование

Выберите один из вариантов оформления и следуйте описанной для него инструкции.

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Таблица стилей интернет-магазина" в самом начале вставьте код:

@import url(/dragNdrop/panelRound.css);

в шаблоне "Каталог товаров" перед вставленным на втором шаге кодом, разместите:

<div id="dnd-basket" class="panel-round"><div></div></div>

---

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Таблица стилей интернет-магазина" в самом начале вставьте код:

@import url(/dragNdrop/panelBottom.css);

в шаблоне "Каталог товаров" перед вставленным на втором шаге кодом, разместите:

<div id="dnd-basket" class="panel-bottom"><div><span><span>Поместите товар сюда!</span></span></div></div>

---

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Таблица стилей интернет-магазина" в самом начале вставьте код:

@import url(/dragNdrop/panelTop.css);

в шаблоне "Каталог товаров" перед вставленным на втором шаге кодом, разместите:

<div id="dnd-basket" class="panel-top"><div><span><span>Поместите товар сюда!</span></span></div></div>

---

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Таблица стилей интернет-магазина" в самом начале вставьте код:

@import url(/dragNdrop/panelLeft.css);

в шаблоне "Каталог товаров" перед вставленным на втором шаге кодом, разместите:

<div id="dnd-basket" class="panel-left"><div><span><span></span></span></div></div>

---

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Таблица стилей интернет-магазина" в самом начале вставьте код:

@import url(/dragNdrop/panelRight.css);

в шаблоне "Каталог товаров" перед вставленным на втором шаге кодом, разместите:

<div id="dnd-basket" class="panel-right"><div><span><span></span></span></div></div>

---

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Таблица стилей интернет-магазина" в самом начале вставьте код:

@import url(/dragNdrop/panelBlock.css);

в шаблоне "Каталог товаров" перед вставленным на втором шаге кодом, разместите:

<div id="dnd-basket" class="panel-block"><div><span><span>Поместите товар сюда!</span></span></div></div>

---

Перейдите в Панель управления » Управление дизайном , и в шаблоне "Таблица стилей интернет-магазина" в самом начале вставьте код:

@import url(/dragNdrop/panelBlockCenter.css);

в шаблоне "Каталог товаров" перед вставленным на втором шаге кодом, разместите:

<div id="dnd-basket" class="panel-block-center"><div><span><span>Поместите товар сюда!</span></span></div></div>